<template>
  <div class="video-player-wrap">
    <el-page-header :icon="null" @back="back">
      <template #content>
        <span class="title"> {{ form.title || "标题" }} </span>
      </template>
    </el-page-header>
    <div class="xgPlayer-wrap">
      <div id="xgPlayer"></div>
    </div>
  </div>
</template>

<script>
import request from "utils/request";
// 在需要的页面引入
import xgplayer from "xgplayer";

export default {
  name: "JddChromePluginsVideoPlayer",
  data() {
    return {
      // https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4
      form: {
        title: "",
        video_url: "",
        thumbnail: "",
      },
      playerInstance: null,
    };
  },

  async mounted() {
    await this.getVideoInfo();
    this.initPlayer();
    this.initPlayerSize();
  },

  methods: {
    async getVideoInfo() {
      let ret = await request.post("/findVideo", { id: this.$route.query.id });
      if (ret.code == 200) {
        this.form.title = ret.data.title;
        this.form.video_url = ret.data.video_url;
        this.form.thumbnail = ret.data.thumbnail;
      }
    },
    // 定义一个方法来初始化
    initPlayer() {
      let _this = this;
      this.playerInstance = new xgplayer({
        id: "xgPlayer", // 上面容器的id选择器
        url: _this.form.video_url,
        autoplay: true, // 自动播放
        with: 500,
        height: 300,
        poster: _this.form.thumbnail, // 海报
        playbackRate: [0.5, 0.75, 1, 1.5, 2], // 播放速率
        download: true, // 下载
      });
    },
    initPlayerSize() {
      this.$nextTick(() => {
        document.querySelector("#xgPlayer").style.width = "500px";
        document.querySelector("#xgPlayer").style.height = "320px";
      });
    },
    clearPlayerInstance() {
      this.playerInstance && this.playerInstance.destroy();
      this.playerInstance = null;
    },
    beforeDestroy() {
      this.clearPlayerInstance();
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.video-player-wrap {
  width: 550px;
  min-height: 400px;
  padding: 15px 20px;
  .title{
    font-size: 13px;
  }
  .xgPlayer-wrap {
    padding: 20px 0px;
    text-align: center;
  }
  #xgPlayer {
    margin: auto;
  }
}
</style>